body{
    font-size: 30px;
}
/*
    文本样式
    元素样式
    元素定位(重要-页面布局)
    元素动画
*/
/* 文本样式 */
.font-color{
    /*颜色 ( 颜色代码，HEX，rgb|rgba ) */
    /*color: rebeccapurple;*/
    /*HEX 颜色码可以缩写*/
    /*color: #f00; !*#ff0000*!*/
    /*HEXA A 是透明度，取值 00(完全透明)~ff(不透明)*/
    /*color: #ff000088;*/
    /*上述颜色设置等同于下述颜色设置*/
    color: rgba(255,0,0,0.5);
}
.font{
    /* 计算机的文字实际上是一组类似于图片的符号 */
    /*颜色,大小,类型,风格,字体的粗细*/
    /*font-size: large;*/
    /*font-size: smaller;*/
    /*font-size: 1cm;*/
    font-size: 30px;
    /*
        字体类型的设置，实际上是通知浏览器加载对应的字库文件
        字库文件 - 文字的设计方式
        html+css文字类型设置不建议随意更改字体类型，字体类型是需要浏览器或系统内置的文件
        所以页面进行文字类型修改时建议使用安全字体 - 浏览器的自带的字体
        字体是可以扩展的 -
            1. 下载对应的字库文件(ttf,woff,woff2)
            2. 为浏览器定义扩展字库 @font-face
            3. 在需要使用的标签上定义 使用字库名
    */
    /*font-family: "楷体";*/
    /*font-family: "幼圆";*/
    font-family: "幼圆",楷体,monospace;
}
/*字体扩展定义*/
@font-face {
    /*字库名称设置 - @font-face*/
    font-family: "itany";
    /*字库文件加载*/
    src: url("../font/pingyin.ttf");
}
/*
    对于扩展的字库，每个字库文字都有对于的文字编码
    这些编码在html和css中被叫做文字实体编码
    html中使用实体编码 &#x编码
    css中使用实体编码 \编码
*/
@font-face {
    font-family: icon;
    src: url("../font/iconfont.ttf");
}
.font-itany{
    font-size: 50px;
    font-family: "itany",icon;
    color: darkgreen;
}
.iconfont{
    font-size: 30px;
}
.icon-setup:before{
    font-size: 36px;
    /*vertical-align 文字的垂直对齐方式 - 后面详细说明*/
    vertical-align: middle;
}
.font-style {
    /*正常效果（默认规则）*/
    /*font-style: normal;*/
    /*斜体 - 对应的字库存在斜体模式*/
    /*font-style: italic;*/
    /*倾斜 - 将文字图标直接进行倾斜显示*/
    font-style: oblique;
    /*font-style: revert;*/
}
.font-all{
    /*
        css 中对于具有共同作用特性的样式，多数可以用简化组合的方式完成样式定义描述
        能够被组合的样式 基本都是以 固定关键字开头-分支样式，例如 font-size,font-style,……
        简化语法一般只以关键字作为样式名，固定顺序描述样式取值：
            例如 font:[<font-style>] [<font-weight>] [<font-size>] [<font-family>]
    */
    font:oblique bolder 50px 楷体;
    /*font:oblique 50px 楷体;*/
    /*
        组合样式是需要按照固定顺序进行定义【w3c标准规范】
         => 多数浏览器对位置具有严格要求的目前只存在几个，其中 font , transform , animation
    */
    /*font:oblique 楷体 bolder 50px;*/
}

.text-1{
    /*元素高度*/
    height: 80px;
    /*元素的边框*/
    border: 1px solid black;
    /*文本颜色*/
    color: brown;
    /*文本行高 - 对具有固定高度的元素进行文本行的高度设置 - 实现文本垂直居中*/
    line-height: 80px;
    /*水平对齐方式*/
    /*text-align: left;*/
    /*text-align: right;*/
    /*text-align: center;*/
    /*文本两端对象需要配合text-align-last一起使用 [包含伪元素]*/
    text-align: justify;
    text-align-last: justify;
}
.user-input{
    font-size: 16px;
}
.user-input > label{
    /*inline-block将元素设置为可以定义宽度的元素*/
    display: inline-block;
    width: 100px;
    /*text-align: right;*/
    text-align: justify;
    text-align-last: justify;
}
/*.user-input > label:after{*/
/*    content: ":";*/
/*}*/
.text-2{
    /*元素高度*/
    height: 80px;
    /*元素的边框*/
    border: 1px solid black;
    /* vertical-align 定义同一行不同内容高度的垂直对齐方式 - 常用于同行出现文字和图片 */
    /*vertical-align: middle;*/
}
.text-2>span,.text-2>img{
    vertical-align: middle;
}
/*html页面会将换行符识别为一个空格*/
.search-btn{
    font-size: 0px;
}
.search-btn > input[type=text],
.search-btn > button{
    font-size: 30px;
    height: 50px;
    vertical-align: middle;
}
.text-3{
    /*文本缩进*/
    text-indent: 60px;
    /*文本修饰*/
    /*text-decoration: none;*/
    /*text-decoration: underline;*/
    /*text-decoration: overline;*/
    /*text-decoration: line-through;*/
    text-decoration: underline brown 10px dashed;
}
.text-4{
    /*文本格式转换*/
    /*text-transform:none;*/
    /*text-transform: lowercase;*/
    /*text-transform: uppercase;*/
    text-transform: capitalize;
}
.text-5{
    /*字符间距*/
    letter-spacing:8px;
    word-spacing: 60px;
}
.text-6{
    /* 单词间距 -> 以空格分割的字符组 */
    word-spacing: 60px;
}
.text-7{
    /*white-space: normal;*/
    /*white-space: nowrap;*/
    /*white-space: pre-wrap;*/
    /*white-space: pre-line;*/
}
.text-8{
    /*
    中文文本一行放不下默认会自动换行
    英文文本一行放不下，且文本没有空格，不换行
    */
    /*正常模式*/
    /*word-break: normal;*/
    /*文字一行放不下直接换行(不考虑单词)*/
    /*word-break: break-all;*/
    /*文字一行放不下直接换行(考虑单词)*/
    word-break: break-word;
}

.text-over{
    width: 350px;
    border: 1px solid black;
    white-space: nowrap;
    /*滚动条设置 - scroll auto hidden*/
    /* hidden 隐藏滚动条-同时也会隐藏超出元素 */
    overflow: hidden;
    /* 文本超出的部分会被转换为 ... 描述未显示完全 */
    text-overflow: ellipsis;
}









